<template>
  <div class="prop-demo">
    <div>{{ a }}</div>
    <div>{{ b }}</div>
    <div v-for="p in dataList" :key="p.id">
      <h2>id：{{ p.id }}</h2>
      <h2>姓名：{{ p.name }}</h2>
      <h2>年龄：{{ p.age }}</h2>
      <h2 v-if="p.address">地址：{{ p.address }}</h2>
    </div>
  </div>
</template>

<script lang="ts" setup name="PropsDemo">
import { withDefaults } from "vue";
//只接收
// let result = defineProps(["a", "b", "dataList"]);
// console.log(result.a, result.b, result.dataList);
//接收+限制,问号表示可有可无
// import { type IPersons1 } from "@/types";
// let result = defineProps<{ a?: string; b: string; dataList: IPersons1 }>();
// console.log(result.a, result.b, result.dataList);
//接收+限制,给定默认值
import { type IPersons1 } from "@/types";
//defineProps和defineExpose不需要引入，可以直接使用
let result = withDefaults(
  defineProps<{ a?: string; b: string; dataList: IPersons1 }>(),
  {
    a: () => "啦啦啦",
    b: () => "哦哦哦",
    dataList: () => [],
  }
);
console.log(result.a, result.b, result.dataList);
</script>

<style>
.prop-demo {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>